/*
 * @Author: 一路向阳 tt_sunzhenfeng@163.com
 * @Date: 2024-03-01 19:28:30
 * @LastEditors: 一路向阳 tt_sunzhenfeng@163.com
 * @LastEditTime: 2024-03-04 21:34:43
 * @FilePath: \utils_react_manager\app\src\views\Word\components\AddWord\index.tsx
 * @Description: 更新单词
 */
import React, { useCallback, useState, useEffect } from "react";
import { Button, Radio , Form, Input, message } from 'antd';
import { SOURCE_OPTIONS } from '../../contants';
import { addWord, updateWord } from '@/api/word';

import './index.less';

interface IProps {
  item: IWordListItem;
  onCancel?: (value: boolean) => void;
} 

const WordComp: React.FC<IProps> = props => {
  const { onCancel, item } = props;
  // form实例
  const [form] = Form.useForm();
  // 加载
  const [loading, setLoading] = useState(false);

  const wordApi = Object.keys(item).length ? updateWord : addWord;

  // 取消弹框
  const handleCancel = useCallback(
    () => {
      onCancel?.(false);
    },
    [onCancel]
  );

  // 提交添加
  const handleFinishValues = useCallback(
    async (values: IAddWordPayload) => {
      try {
        setLoading(true);
        const { msg, success } = await wordApi({
          ...values,
          id: item?.id,
          createTime: new Date().getTime(),
          updateTime: new Date().getTime()
        });
        success ? message.success(msg) : message.warning(msg);
        onCancel?.(false);
        setLoading(false);
        form.resetFields();
      }
      catch (error: any) {
        message.success(error);
      }
    },
    [onCancel]
  );


  useEffect(
    () => {
      // 判断是否更新
      if (item) {
        form.setFieldsValue({...item})
      }
    },
    [item]
  );

  return (
    <Form
      form={form}
      preserve={false}
      autoComplete="off"
      initialValues={{
        source: 'basis'
      }}
      onFinish={handleFinishValues}
    >
      {/* 单词选项 */}
      <Form.Item
        label="单词"
        name="name"
      >
        <Input placeholder="请输入单词" />
      </Form.Item>
      {/* 音标选项 */}
      <Form.Item
        label="音标"
        name="voice"
      >
        <Input placeholder="请输入音标" />
      </Form.Item>
      {/* 描述选项 */}
      <Form.Item
        label="描述"
        name="explain"
      >
        <Input.TextArea placeholder="请输入描述" />
      </Form.Item>
      {/* 来源选项 */}
      <Form.Item
        label="来源"
        name="source"
      >
        {/* <Select placeholder="请选择数据来源" options={SOURCE_OPTIONS} /> */}
        <Radio.Group>
          {
            SOURCE_OPTIONS?.map(item => {
              return <Radio key={item.value} value={item.value}>{item.label}</Radio>;
            })
          }
        </Radio.Group>
      </Form.Item>
      {/* 按钮 */}
      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button onClick={handleCancel}>取消</Button>
        <Button type="primary" htmlType="submit" loading={loading}>
          确定
        </Button>
      </Form.Item>
    </Form>
  );
};

export default WordComp;